<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件与循环</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 将数据绑定到dom结构 -->
    <div id="app">
        <!-- 如果seen为true，则显示p标签 -->
        <p v-if="seen" @click="isSeen">现在你看到我了！</p>
    </div>
    <div id="app-2" @click="addItem">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                seen: true,
            },
            methods: {
                isSeen: function() {
                    this.seen = !this.seen;
                }
            },
        });
        var app2 = new Vue({
            el: "#app-2",
            data: {
                todos: [
                    {text: "学习JavaScript技巧"},
                    {text: "学习Vue基本知识"},
                    {text: "学习面试技巧"},
                ]
            },
            methods: {
                addItem() {
                    this.todos.push(
                        {text: "添加todos于" + new Date()}
                    )
                }
            }
        });
        // 操作todos
        app2.todos.push(
            {text: "添加todos1"},
            {text: "添加todos2"},
        );
    </script>
</body>
</html>